<template>
  <div class="user-layout">
    <div class="sidebar">
      <el-menu
        router
        :default-active="$route.path"
        class="el-menu-vertical"
      >
      <!-- 非用户端功能
        <el-menu-item index="/user/announcement">
          <span>公告通知</span>
        </el-menu-item> -->
        <el-menu-item index="/user/device-request">
          <span>设备申请</span>
        </el-menu-item>
        <el-menu-item index="/user/equipment-query">
          <span>器械查询</span>
        </el-menu-item>
        <!-- 重复功能页面
        <el-menu-item index="/user/equipment-apply">
          <span>器械申报</span>
        </el-menu-item> -->
        <el-menu-item index="/user/equipment-return">
          <span>器械归还</span>
        </el-menu-item>
        <el-menu-item index="/user/repair-apply">
          <span>维修申请</span>
        </el-menu-item>
        <el-menu-item index="/user/repair-progress">
          <span>维修进度</span>
        </el-menu-item>
        <el-menu-item index="/user/user-profile">
          <span>个人中心</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main-content">
      <router-view />
    </div>
    <el-button @click="handleLogout()">退出登录</el-button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()

const handleLogout = () => {
  userStore.clearUserInfo()
  ElMessage.success('已退出登录1')

  router.push('/auth/login')
}


</script>

<style scoped>
.user-layout {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 220px;
  background-color: #fff;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1);
}
.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}
</style>